import { _sin, _cos, _k, translate, plainMatrix } from '../../math/index.js'
import { gridCellPoints } from '../../math/points/index.js'
import { colorCircle } from '../../color/index.js'
import { deepClone } from '../../utils/index.js'
import { pattern } from "./pattern.js"

let r = 25
let angle = 40
let a = _sin(angle) * r
let b = _cos(angle) * r
let gps = gridCellPoints()
gps = plainMatrix(gps)
let len = gps.length
let colors = colorCircle(len, 0.5)
let colorsLen = colors.length
let arr = gps.map((t, i) => {
    let o = t
    let points = [translate(t, [r, r]), translate(t, [-r, -r])]
    return {
        shape: 'circle',
        r,
        o,
        points,
        props: {
            fill: colors[i % colorsLen]
        }
    }
})
console.log(arr)

export const shapes = deepClone(arr)

export const circles = deepClone(arr)

export const rects = deepClone(arr).map(t => {
    return {
        ...t,
        shape: 'rect'
    }
})

export const lines = deepClone(arr).map(t => {
    return {
        ...t,
        shape: 'line',
        props: {
            stroke: t.props.fill,
            'stroke-width': 2
        }
    }
})

export const curves = deepClone(arr).map(t => {
    return {
        ...t,
        shape: 'curve',
        props: {
            stroke: t.props.fill,
            'stroke-width': 2
        }
    }
})

export const sawtooths = deepClone(arr).map(t => {
    return {
        ...t,
        shape: 'sawtooth',
        props: {
            // stroke: t.props.fill,
            // 'stroke-width': 2
        }
    }
})

let patternLen = pattern.length
// let pt = pattern[index % patternLen]
let pt = pattern[0]
export const circlesPattern = deepClone(circles).map((t, index) => {

    return {
        ...t,
        pattern: pt.id
    }
})

export const rectsPattern = deepClone(rects).map((t, index) => {

    return {
        ...t,
        pattern: pt.id
    }
})

// export const shapes = [
//     {
//         shape: 'circle',
//         r: 50,
//         o: [50, 50],
//         props: {
//             fill: 'red'
//         },
//     },
//     {
//         shape: 'rect',
//         p1: [100, 100],
//         p2: [200, 200],
//         props: {
//             fill: 'green'
//         },

//     },
//     {
//         shape: 'rect',
//         p1: [200, 200],
//         p2: [300, 400],
//         props: {
//             fill: 'yellow'
//         },
//     },
//     {
//         shape: 'rect',
//         p1: [300, 400],
//         p2: [500, 600],
//         props: {
//             fill: 'purple'
//         }
//     },
//     {
//         shape: 'line',
//         p1: [200, 100],
//         p2: [400, 200],
//         props: {
//             stroke: 'blue',
//             'stroke-width': '10px'
//         }
//     },
//     {
//         shape: 'ray',
//         r: 50,
//         o: [300, 300],
//         n: 5,
//         props: {
//             stroke: 'purple',
//             'stroke-width': '1px'
//         }
//     }
// ]